<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="head-box">
			<shopro-navbar>
				<view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content" style="display: flex;justify-content: center;">
					<text>商家列表</text>
				</view>
			</shopro-navbar>
			<view class="u-iconfont" :class="'uicon-' + backIconName" :style="{ color: backIconColor, fontSize: backIconSize + 'rpx' }" @tap="goBack"></view>
			<scroll-view
				class="scroll"
				scroll-x
				scroll-with-animation
				:scroll-left="scrollLeft"
			>
			<view class="scroll__item" v-for="(item, index) in category" :key="item.id" :class="{ action: currentItemId === item.id }" @tap="handleSelect('cid' + item.id, index + 2)" >
				{{ item.name }}
			</view>
			</scroll-view>
		</view>
		<!-- 导航栏 -->
		<home-head v-if="headSwiperList && headSwiperList.length" :isScorll="isScorll" borderRadius="0"
			:navTitle="initShop.name" :list="headSwiperList" @showsel="showsel">
			<scroll-view
			    slot="nav"
				class="scroll"
				scroll-x
				scroll-with-animation
				:scroll-left="scrollLeft"
			>
			<view class="scroll__item" v-for="(item, index) in category" :key="item.id" :class="{ action: currentItemId === item.id }" @tap="handleSelect(item.id)" >
				{{ item.name }}
			</view>
			</scroll-view>
			</home-head>
        <sh-hot-shops :goodsList="goodsList" :city="city" @my-event="getMyEvent" @my-events="getMyEvents"></sh-hot-shops>

		<!-- 缺省页 -->
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<!-- 登录弹窗 -->
	</view>
</template>

<script>
// import shFilter from './components/sh-filter.vue';
import shHotShops from './components/sh-hot-shops.vue';
import { mapMutations, mapActions, mapState,mapGetters } from 'vuex';
import homeHead from '../index/index/home-head.vue';
let systemInfo = uni.getSystemInfoSync();
let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
export default {
	components: {
		shHotShops,
		homeHead
	},
	data() {
		return {
			isEmpty: false,
			goodsList: [],
			searchVal: '',
			listParams: {
				page: 1,
				order:'',//排序条件
				screen:'',//筛选数组
				city:'',//所在城市
				choice_city:'',//选择的城市
				cid:''
			}, //当前分页
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 1,

			// 瀑布流 350-330
			addTime: 100, //排序间隙时间
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			tempList: [],
			city:{},
			nextpage:false,
			scrollLeft:0,
			backIconSize:44,
			backIconName:'arrow-left',
			backIconColor:'#fff',
			currentItemId:1,
			category:[
				
			],
			isScorll: false,
			headSwiperList:[]
		};
	},
	// 触底加载更多
	onReachBottom() {
		// console.log("+++____")
		if (this.listParams.page < this.lastPage) {
			this.listParams.page += 1;
			this.getGoodsList();
		}
	},
	computed: {
		...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
		// 头部模块数据
		// headSwiperList() {
		// 	if (this.homeTemplate?.length) {
		// 		return this.homeTemplate[0]?.content?.list;
		// 	}
		// },
	},
	onLoad() {
		this.getClassList();//分类
		// if (this.$Route.query.id) {
		// 	this.listParams.category_id = this.$Route.query.id;
		// 	this.getGoodsList();
		// } else if (this.$Route.query.hasOwnProperty('keywords')) {
		// 	this.listParams.keywords = this.$Route.query.keywords;
		// 	this.searchVal = this.$Route.query.keywords;
		// 	!this.$Route.query.keywords && this.getGoodsList();
		// } else {
		// 	this.getGoodsList();
		// }
	},
	methods: {
		// 瀑布流相关
		async splitData() {
			if (!this.tempList.length) return;
			let item = this.tempList[0];
			if (!item) return;

			// 分左右
			if (this.leftHeight < this.rightHeight) {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			} else if (this.leftHeight > this.rightHeight) {
				this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.rightList.push(item);
			} else {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			}

			// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			this.tempList.splice(0, 1);
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime);
			}
		},
		clear() {
			this.leftList = [];
			this.rightList = [];
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.tempList = [];
		},

		onFilter(e) {
			this.listParams.order = e;
			this.goodsList = [];
			this.listParams.page = 1;
			this.lastPage = 1;
			this.clear();
			this.$u.debounce(this.getGoodsList);
		},
		// 键盘搜索,输入搜索
		onSearch() {
			this.goodsList = [];
			this.listParams.page = 1;
			this.lastPage = 1;
			this.listParams.keywords = this.searchVal;
			this.clear();
			this.$u.debounce(this.getGoodsList);
		},

		// 队列
		getArr(list, item) {
			let arr = list;
			let length = 10; //队列长度
			arr.length < length ? arr.unshift(item) : arr.pop();
			return arr;
		},

		// 清除搜索框
		clearSearch() {
			this.searchVal = '';
			this.clear();
		},
		getClassList() { // 分类列表
			let that = this;
			that.$http('home.getStoreCate', {}, '').then(res => {
				if (res.code === 1) {
					this.category = res.data.list
					this.currentItemId = res.data.list[0].id
					this.listParams.cid = this.currentItemId
					this.headSwiperList = res.data.list[0].images
					this.getGoodsList();
				}
			});
		},
		// 商品列表
		getGoodsList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('home.storeList', that.listParams, '加载中...').then(res => {
				// if (this.searchVal && !historyTag.includes(this.searchVal)) {
				// 	let searchHistoryArr = JSON.stringify(this.getArr(historyTag, this.searchVal));
				// 	uni.setStorageSync('searchHistoryArr', searchHistoryArr);
				// }
				if (res.code === 1) {
					// console.log(that.goodsList)
					that.goodsList = [...that.goodsList, ...res.data.rows];
					that.isEmpty = !that.goodsList.length;
					that.lastPage = res.data.lastpage;
					that.loadStatus = that.listParams.page < res.data.lastpage ? 'loadmore' : 'nomore';
					that.tempList = res.data.rows;
					// that.splitData();
					// console.log(that.lastPage)
				}
			});
		},
		getMyEvent(msg){
			//筛选方法
			// console.log(msg)
			this.listParams.screen = msg
			this.listParams.page = 1;
			this.lastPage = 1;
			this.goodsList = [];
			this.getGoodsList();
		},
		getMyEvents(msg){
			//顶部切换方法
			this.listParams.order = msg
			this.listParams.page = 1;
			this.lastPage = 1;
			this.goodsList = [];
			this.getGoodsList();
		},
		goBack() {
			uni.navigateBack();
		},
		showsel(item){
			console.log(item)
			if(item.type == 1){
				//自己选在城市
				this.listParams.city = item
			}else{
				//选择的城市
				this.listParams.choice_city = item
			}
			this.listParams.page = 1;
			this.lastPage = 1;
			this.goodsList = [];
			this.getGoodsList();
		},
		handleSelect(id){
			this.currentItemId = id
			this.listParams.cid = this.currentItemId
			let category = this.category
			for(let i in category){
				if(category[i].id == id){
					this.headSwiperList = category[i].images
				}
			}
			this.listParams.page = 1;
			this.lastPage = 1;
			this.goodsList = [];
			this.getGoodsList();
		}
	}
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.u-waterfall {
	@include vue-flex;
	flex-direction: row;
	align-items: flex-start;
}

.u-column {
	@include vue-flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}
.head-box {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 998;
	display: flex;
	flex-direction: row;
	align-items: center;
	// background: #fff;
	background-color: rgb(237, 0, 25);
}
.scroll__item{
	z-index: 2;
	font-size: 14px;
	display: inline-flex;
	height: 29px;
	align-items: center;
	margin-right: 20px;
	color: #333;
	font-weight: 500;
	position: relative;
}
.scroll{
	padding: 5px 15px;
	white-space: nowrap;
	background-color: #fff;
}
.action{
	color: rgb(237, 0, 25);
}
.scroll__item.action::after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 2px;
    width: 15px;
    border-radius: 3px;
    background-color: rgb(237, 0, 25);
}
</style>
